<template>
  <view>
    <Header></Header>
    <view class="f36 fw ml4 mt5 text-center">欢迎使用百霸测评，百霸测评将为您提供专业测评…… </view>
    <view class="f36 fw ml4 mt3">其他测评 </view>
    <view class="card">
      <view class="list" v-for="item in list" :key="item.moduleclass_id">
        <view class="item" @click="goDetail(item)">
          <view class="tag" v-if="item.rec_status == 1">
            <view class="tag-text">已评测</view>
          </view>
          <view class="text">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="f36 fw ml4 mt3">知识测评 </view>
    <view class="card">
      <view class="list">
        <view class="item" @click="goSynchroTesting(2)">
          <view class="text">综合评测</view>
        </view>
      </view>
      <view class="list">
        <view class="item" @click="goSynchroTesting(1)">
          <view class="text">同步评测</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { testpaper } from '/api'

const list = ref()
const student_id = ref()
const subject_ids = ref()
const grade_id = ref()
const stage_id = ref()

onLoad(async (options) => {
  student_id.value = options.student_id
  subject_ids.value = options.subject_ids
  grade_id.value = options.grade_id
  stage_id.value = options.stage_id

})

onShow(() => {
  init()
})

async function init() {
  const {
    data: { data }
  } = await testpaper({ student_id: student_id.value, usertype: 1, type: 3 })
  list.value = data
}

function goDetail(item) {
  uni.navigateTo({
    url:
      item.rec_status == 1
        ? `/pages/evaluating/result?student_id=${student_id.value}&testpaper_id=${item.testpaper_id}&title=${item.name}`
        : `/pages/evaluating/evaluating?student_id=${student_id.value}&testpaper_id=${item.testpaper_id}&grade_id=${grade_id.value}`
  })
}

function goSynchroTesting(type) {
  uni.navigateTo({
    url: `/pages/evaluating/synchroTesting?student_id=${student_id.value}&type=${type}&subject_ids=${subject_ids.value}&grade_id=${grade_id.value}&stage_id=${stage_id.value}`
  })
}
</script>

<style lang="scss" scoped>
.card {
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;

  .list {
    display: flex;
    flex-wrap: wrap;
    width: 33.33%;
    height: 300rpx;
    margin-bottom: 30rpx;
    max-width: 900rpx;
  }

  .item {
    width: 100%;
    height: 300rpx;
    // background-color: #377CB7;
    margin: 10rpx;
    border-radius: 8rpx;
    padding: 50rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: url('/static/image/card-bg.png');
    background-size: 100% 100%;

    .tag {
      position: absolute;
      top: -20rpx;
      left: -12rpx;
      width: 244rpx;
      height: 80rpx;
      background-image: url('/static/image/tag.png');
      background-size: 100% 100%;
      display: flex;

      &-text {
        color: #fff;
        font-weight: bold;
        margin-left: 70rpx;
        margin-top: 16rpx;
      }

      .img {
        width: 244rpx;
        height: 80rpx;
      }
    }

    .text {
      font-weight: bold;
      color: #fff;
      font-size: 28rpx;
    }
  }
}
</style>
